---
order: 2.2
category: '@threlte/extras'
sourcePath: 'packages/extras/src/lib/components/controls/OrbitControls/OrbitControls.svelte'
title: '<OrbitControls>'
type: 'component'
componentSignature:
  {
    extends:
      { type: 'OrbitControls', url: 'https://threejs.org/docs/#examples/controls/OrbitControls' }
  }
---

`<OrbitControls>` allow the camera to orbit around a target while ensuring a
fixed camera up vector. If the camera orbits over the "north" or "south" poles,
the camera experiences a "gimbal lock" that forces the scene to rotate until it
is rightside up. This type of camera control is commonly used for showing off 3D
models of products because it prevents them from ever appearing upside down. For
an alternative camera controller, see
[`<TrackballControls>`](/docs/reference/extras/trackball-controls).

The `<OrbitControls>` component must be a direct child of a camera component and
will mount itself to that camera.

<Example
  path="extras/orbit-controls"
  iframe
/>

This example shows off just a few of the configurable properties of
`<OrbitControls>`. To see all 30+ properties, consult the [Three.js
docs](https://threejs.org/docs/#examples/en/controls/OrbitControls).

## Usage

```svelte
<script>
  import { OrbitControls } from '@threlte/extras'
  import { T } from '@threlte/core'
</script>

<T.PerspectiveCamera
  makeDefault
  fov={50}
>
  <OrbitControls enableDamping />
</T.PerspectiveCamera>
```

`<OrbitControls>` is a light wrapper that will use its parent as the target
camera and the DOM element the renderer is rendering to as the DOM element to
listen to pointer events.
